<template>
  <div class="select-sys">
    <a-button type="dashed" ghost danger size="small" @click="onBack"
      >返回</a-button
    >
    <div class="select-sys__card-list">
      <a-card
        hoverable
        class="select-sys__card-item"
        v-for="item in permList"
        :key="item.id"
        @click="gotoSys(item.id)"
      >
        <template #cover>
          <img
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
        </template>
        <a-card-meta :title="item.name">
          <template #description>{{ item.code }}</template>
        </a-card-meta>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MenuItem } from '@/api/userCenter/system/model/menuModel'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'

defineProps<{
  permList: MenuItem[]
}>()
const emits = defineEmits<{
  (e: 'back'): void
}>()

const router = useRouter()
const store = useStore()

const onBack = () => {
  emits('back')
}
const gotoSys = (id: string) => {
  store.commit('account/SAVE_MENU_LIST', id)
  router.push('/welcome')
}
</script>

<style lang="scss" scoped>
@include b(select-sys) {
  width: 60vw;
  @include e(card-list) {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  @include e(card-item) {
    user-select: none;
    cursor: pointer;
    width: 240px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>
